<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>axios 调用方法发送请求</title>
    <!-- 引入axios -->
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.min.js"></script>
</head>
<body>
  <button id="btn2">点击发送 GET 请求2</button>
  <button id="btn3">点击发送 POST 请求2</button>
  <button id="btn4">点击发送 PUT 请求2</button>
  <button id="btn5">点击发送 DELETE 请求2</button>

  <script>
    document.getElementById('btn2').onclick=async ()=>{
      try{
          const response =await axios.get(
            'http://localhost:3000/book',{
          params:{
            id:2
          }
        })
        response=>{
          console.log(response)
          alert(JSON.stringify(response.data))
        }
      }catch(error){
        console.log(error)
        alert(error.message)
      }
    }

    document.getElementById('btn3').onclick=async ()=>{
      try{
          const response =await axios.post(
            'http://localhost:3000/book',
            {title:'qq2',author:'腾讯2'})
        
          console.log(response)
          alert(JSON.stringify(response.data))
        
      }catch(error){
        console.log(error)
        alert(error.message)
      }
    }
    
    document.getElementById('btn3').onclick=async ()=>{
      try{
          const response =await axios.put('http://localhost:3000/movie/9',{
          
            name:'微信2',
            director:'baidu2'
          
        })
       
          console.log(response)
          alert(JSON.stringify(response.data))
        
      }catch(error){
        console.log(error)
        alert(error.message)
      }
    }
    document.getElementById('btn5').onclick=async ()=>{
      try{
          const response =await axios.delete('http://localhost:3000/movie/9')
          
            console.log(response)
            alert(JSON.stringify(response.data))
        
      }catch(error){
        console.log(error)
        alert(error.message)
      }
    }
  </script>
</body>
</html>